// 对Vue的全局指令, 进行封装
// 封装中间件函数插件
// 封装中间件函数 自动聚焦
const directiveObj = {
  install (Vue) {
    Vue.directive('focus', {
      inserted (el) { // el代表指令所在标签 指令所在标签，被插入到真实dom才触发，如果标签用display:none隐藏再出现，不会再触发inserted 解决办法：update
        // 指令所在van-search组件
        // 组件根标签是div，input在内部
        // 以上都是原生标签对象
        // 知识点：原始DOM.nodeName 拿到标签名字 （标签名字要大写）
        // el.focus
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          if (theInput) theInput.focus()
          if (theTextArea) theTextArea.focus()
        }
      },
      update (el) { // 指令所在标签 被更新时触发
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          if (theInput) theInput.focus()
          if (theTextArea) theTextArea.focus()
        }
      }
    })
  }
}

export default directiveObj
